<template>
  <div class="container">
    <div class="app-container">
      <!-- 使用el-tree把组件架构的树型结构渲染出来 -->
      <!--
        1. data属性： 绑定树型数组
        2. default-expand-all： 是否默认展开所有节点
           没有属性 不展开   有这个属性就展开
        3. props: 指定关键属性的属性名
        4. expand-on-click-node="false"  只有点前面箭头的时候，才收缩展开
        默认插槽：     每个节点的结构如果想自定义，使用默认插槽
        作用域插槽：   data 就是每个节点的数据对象
       -->
      <el-tree
        :data="list"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!-- <template v-slot="{ data }"> -->
        <template #default="{ data }">
          <!--
              node 当前节点的组件对象
              data 就是每个节点的数据对象
           -->
          <el-row style="width: 100%" type="flex" justify="space-between">
            <el-col>{{ data.name }}</el-col>
            <el-col :span="6">
              <span>{{ data.managerName }}</span>
              <!-- 下拉菜单 -->
              <!-- <el-dropdown @command="actionHandle($event)"> -->
              <!-- $event 是操作类型     data.id： 当前部门的id  -->
              <el-dropdown @command="actionHandle($event, data.id)">
                <!-- 默认展示的内容 -->
                <span class="opt-text">
                  操作 <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <!-- 下拉菜单的菜单项 -->
                <template v-slot:dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                    <el-dropdown-item command="del">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 放置弹出层子组件 -->
    <add-dept
      ref="addDept"
      :current-id="currentId"
      :is-show-dialog.sync="isShowDialog"
      @success="getList"
    />
    <!-- 和下面的写法等效 -->
    <!--
      <add-dept
        :is-show-dialog="isShowDialog"
        @update:isShowDialog="isShowDialog = $event" />
      -->

    <!--
      .sync的修饰符 是语法糖的写法

      <组件名 :自定义属性名.sync="变量名"/>

      <add-dept :is-show-dialog.sync="isShowDialog" />

      <组件名 :自定义属性名="变量名" @update:自定义属性名="变量名=$event"/>

      <add-dept :is-show-dialog="isShowDialog"  @update:isShowDialog="isShowDialog=$event"/>
     -->
  </div>
</template>

<script>
import {
  getDepartmentList,
  delDepartment
} from '@/api/department'
import { transListToTreeData } from '@/utils'
import addDept from './components/addDept'

export default {
  name: 'Department',
  components: {
    addDept
  },
  data() {
    return {
      // 树型数组
      list: [
        // {
        //   name: '传智教育',
        //   managerName: '管理员',
        //   children: [
        //     { name: '总裁办', managerName: '浪哥哥' },
        //     { name: '行政部', managerName: '管理员' }]
        // },
        // {
        //   name: '黑马程序员',
        //   managerName: '管理员'
        // }
      ],
      defaultProps: {
        // children: 'children',
        // 指定渲染结构是数据的名字，默认是label 替换成立name
        label: 'name'
      },
      isShowDialog: false, // 用来控制子组件中弹出层的显示和隐藏
      currentId: null // 当前点击的部门的id
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // log(data) {
    //   console.log(data)
    // },
    async getList() {
      // 调接口拿数据，拿到的是扁平的组织架构
      const res = await getDepartmentList()
      // console.log(res)
      // 调用函数把扁平数组转成树型数组之后，再把树型数组放到变量的身上
      // console.log(transListToTreeData(res, 0))
      this.list = transListToTreeData(res, 0)
    },
    // 点击下拉菜单项触发（新增 编辑  删除）
    async actionHandle(command, id) {
      // console.log(command)
      // console.log('当前部门的id', id)
      if (command === 'add') {
        // console.log('添加')
        this.isShowDialog = true
        this.currentId = id // 记录要添加的子部门的 pid（父部门id）
      } else if (command === 'edit') {
        this.isShowDialog = true
        this.currentId = id // 记录的编辑的部门的id
        //  this.currentId = 1
        // props父传子除了是响应式的，还是异步的
        // 意思：父组件中改变传递给子组件的变量的值，
        //       子组件不能立即拿到传过来的最新的值
        //       而要等一下，因为父传子是异步的
        // 如何解决 使用 this.$nextTick 等一下
        // 子组件要回显（父组件调用子组件的方法完成回显）
        // console.log(this.$refs.addDept)
        this.$nextTick(() => {
          this.$refs.addDept.getDepartmentDetail()
        })
      } else {
        await this.$confirm('确定删除此部门吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delDepartment(id)
        this.$message.success('删除成功')
        this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.opt-text{
  margin-left: 15px;
  font-size: 16px;
}
</style>
